<template>
    <div>
        <div class="mv-box">
            <ul ref="mvlists">
                <li v-for="(item,index) in mvList" :key="index" class="li">
                    <div class="imgs" v-show="playNum != index" @click="getUrlShow(index,item.id)">
                        <span class="img"><img :src="item.cover" alt=""></span>
                        <span class="iconfont icon-bofang icon"></span>
                    </div>
                    <div class="imgs" v-show="playNum == index"  @click="mvPlayend" >
                        <video :src="item.mvurl" controls :ref="'video'+index"  @loadeddata="loadeddataFun"></video>
                    </div>
                    <div>
                        <div class="brief" @click="gotomvdetail(item.id)">{{item.name}}</div>
                        <div class="name">{{item.artistName}}</div>
                    </div>
                    <div class="bottom-icon">
                        <span class="num">{{item.playCount | reduceNum}}次播放</span>
                        <span class="iconfont icon-pinglun pinglun" @click="pinglun(item.id)"></span>
                    </div>
                        <div class="pinglun-content" v-show="item.id == num">
                            <dl>
                                <dt>
                                    热门评论区
                                </dt>
                                <dd v-for="(item,index) in commentList" :key="index">
                                    <div class="top">
                                        <span class="img"><img :src="item.user.avatarUrl"></span>
                                        <span class="people-name">{{item.user.nickname}}</span>
                                        <span class="time">{{item.time | time}}</span>
                                    </div>
                                    <div class="bottom">
                                        {{item.content}}
                                    </div>
                                </dd>
                            </dl>
                        </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
   import {getMvList,getMvUrl,getCommentMv} from "../api/mv.js"
    export default {
        data() {
            return {
                mvList:[],
                playNum:null,
                offset:0, //偏移数量 , 用于分页
                flag:true,
                num:null,//显示对应评论
                pinglunShow:false,//评论默认不显示
                commentList:[]//热门评论
            }
        },
        created(){
            // 获取mv数据
            getMvList({
                limit:5,
                offset:this.offset
            }).then(data=>{
                console.log(data);
                this.mvList = data.data;
            })
        },
        methods:{
            // 跳转mv详情
            gotomvdetail(id){
                this.$router.push({
                    path:"/mv/mvdetail",
                    query:{
                        id,
                    }
                })
            },
            //获取评论
            getCommentMvFun(id){
                        getCommentMv({id:id}).then(data=>{
                            this.commentList = data.hotComments
                        })
            },
            // 评论区域显示与隐藏
            pinglun(id){
                if(!this.pinglunShow){
                   this.getCommentMvFun(id)
                    this.num = id;
                    this.pinglunShow = true;
                }else{
                    if(this.num == id){
                        this.num = null;
                        this.pinglunShow = false;
                    }else{
                        this.num = id;
                        this.getCommentMvFun(id)
                        this.pinglunShow = true;
                    }
                }
            },
            onSelect(action) {
                Toast(action.text);
            },
            getUrlShow(index,id){
                if(this.playNum || this.playNum == 0){
                   this.$refs['video' + this.playNum][0].pause(); 
                }
                this.playNum = index;
                getMvUrl({id}).then(data=>{
                    // this.mvList[index].mvurl = data.data.url;
                    // 数据没有通过视图
                    this.$set(this.mvList[index],"mvurl",data.data.url)
                })
            },
            loadeddataFun(event){
                event.target.play();
            },
            mvPlayend(){
                // console.log(this.$refs['video' + this.playNum]);
                this.$refs['video' + this.playNum][0].pause();
                this.playNum = null;
            },
            // 添加数据
            addData(){
                // 防抖
                if(this.flag){
                    this.flag = false;
                    this.offset += 5; //第五条数据后添加五条数据
                    getMvList({
                        limit:5,
                        offset:this.offset
                    }).then(data=>{
                        this.mvList = this.mvList.concat(data.data);
                        this.flag = true;
                    })
                }
            },
            // 滚动条监听
            handleScroll(){
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;//滚动条偏移量
                let lis = this.$refs.mvlists.getElementsByClassName("li");
                let num = lis.length;
                let liHeight = lis[num-3].offsetTop;
                if(scrollTop > liHeight){ //触发添加数据
                   this.addData();
                }
            },
        },
        mounted(){
            this.$nextTick(()=>{
                // 监听滚动事件
                window.addEventListener("scroll",this.handleScroll)
            })
        },
        beforeDestroy(){
            window.removeEventListener("scroll",this.handleScroll);
        },
        filters:{
            reduceNum(value){
                let w = value > 10000 ? value/10000 : value;
                let y = w > 10000 ? parseInt(w/10000) + "亿" : parseInt(w) + "万";
                return y;
            },
            time(value){
                let date = new Date(value)
                let Y = date.getFullYear()+"-"
                let M = date.getMonth()+1 < 10?'0'+(date.getMonth()+1)+"-":date.getMonth()+1+"-"
                let D = date.getDate() < 10 ? '0'+date.getDate()+" ":date.getDate()+" "
                let h = date.getHours() < 10 ?'0'+date.getHours() +":":date.getHours()+":"
                let m = date.getMinutes() < 10 ?'0'+date.getMinutes() +":":date.getMinutes()+":"
                let s = date.getSeconds() < 10? '0'+date.getSeconds():date.getSeconds();
                return Y+M+D+h+m+s;

            }
        }
    }
</script>

<style lang="less">
    .mv-box{
        margin-top: 86px;
        width: 100%;
        li{
            // box-shadow: 0 0 5px #aaa;
            width: 96%;
            margin: 0 auto;
        .imgs{
            width: 100%;
            margin: 0 auto;
            background-repeat: no-repeat;
            background-size:contain;
            position: relative;
            .img{
                width: 100%;
                height: 220px;
                border-radius: 5px;
                position: relative;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                    border-radius: 5px;
                    // position: absolute;
                    // top: 0;
                    // left: 0;
                    // right: 0;
                    // bottom: 0;
                    // margin: auto;
                }
            }
            .icon{
                position: absolute;
                top:0px;
                left:0px;
                right: 0px;
                bottom: 0px;
                margin: auto;
                width:40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                background: rgba(0,0,0,0.5);
                border-radius: 50%;
                color:#fff;
                font-size: 16px;
            }
            video{
                width: 100%;
                height: 220px;
                margin: 0 auto;
                display: block;
            
            }
        }
        .brief{
            font-size: 16px;
            width: 100%;
            margin: 10px auto 0;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .name{
            width: 100%;
            margin: 5px auto;
            font-size: 12px;
            color: #aaa;
        }
        .bottom-icon{
            width: 100%;
            margin: 10px auto 15px;
            position: relative;
            .num{
                font-size: 12px;
                color: #555;
            }
            .pinglun{
                float: right;
                margin: 0 8px;
            }
        }
        .pinglun-content{
            margin-bottom: 15px;
            box-shadow: 0 0 5px #aaa;
            height: 200px;
            overflow-y:scroll;
            overflow-x: hidden;
            dl{
                width:100%;
                dt{
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    font-size: 15px;
                    color: #333;
                    font-weight: bold;
                    text-indent: 10px;
                    padding-top:10px;
                }
                dd{
                    width: 100%;
                    margin: 0;
                    .top{
                        width: 100%;
                        height: 30px;
                        line-height: 30px;
                        margin-left: 10px;
                        margin-top: 10px;
                        position: relative;
                        .img{
                            display: inline-block;
                            width: 30px;
                            height: 30px;
                            border-radius:50%;
                            overflow: hidden;
                            background-color: rgb(128, 66, 185);
                            position: relative;
                            img{
                                width: 100%;
                                position: absolute;
                                top: 0;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                margin: auto;
                            }
                        }
                        .people-name{
                            // display: block;
                            position: absolute;
                            top: 1px;
                            left: 38px;
                            margin-left: 8px;
                            font-size: 13px;
                            height: 13px;
                            line-height: 13px;
                            color: #555;
                        }
                        .time{
                            // display: block;
                            position: absolute;
                            top: 17px;
                            left: 38px;
                            margin-left:8px;
                            font-size: 12px;
                            height: 12px;
                            line-height: 12px;
                            color: #bbb;
                        }
                    }
                    .bottom{
                        width:290px;
                        margin-left:48px;
                        font-size: 12px;
                        color: #333;
                        overflow: hidden;
                        padding: 2px 0;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        border-bottom: 1px solid #ccc;
                    }
                }
            }
        }
    }
    }
</style>